<template>
  <section class="hwita-buttons flex-between">
    <div class="header-left">
      <template v-for="btn in props.tableConfig.buttons||[]" :key="btn.label">
        <ElButton v-if="isAuth(btn.auth)" :type="btn.type || 'primary'" :icon="btn.icon" @click="btn.handle(props.tableConfig.rowData)" :disabled="btn.disabled || false">
          {{ btn.label }} <!--  -->
        </ElButton>
      </template>
    </div>
    <div class="header-right">
      <ElButton v-if="props.tableConfig.showRefresh" circle icon="refresh" @click="()=> emit('refresh')" />
      <ElPopover v-if="props.tableConfig.showFilter" placement="bottom-end" :width="260" trigger="click" popper-class="popper-class">
        <template #reference>
          <ElButton circle icon="Filter" />
        </template>
        <ElCheckbox v-for="column in props.tableConfig.columns" :key="column.prop" :label="column.label" v-model:checked="column.show" @change="column.show = !column.show"></ElCheckbox>
      </ElPopover>
    </div>
  </section>
</template>
<script setup name="HwitaButtons">
import { computed } from 'vue'
import { ElButton, ElPopover, ElCheckbox} from 'element-plus'
import {isAuth} from '@/utils/index.js'

const props = defineProps(['tableConfig'])
const emit = defineEmits(['refresh'])

</script>

<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hwita-buttons {
  padding: 16px 16px;
  border: 1px solid #ebeef5;
  border-radius: 5px 5px 0 0;
  background-color: #fff;
}

.header-right {
  display: flex;
  justify-content: space-between;
  align-items: center;

  :deep(.upload-demo .el-upload-list) {
    height: 0;
    display: none;
  }

  .ElButton {
    margin: 0 4px;
  }
}
</style>
